<div id="slipEditBar" class="slipedit-bar">
	<div id="slipEditTitle" class="slipedit-title">XXXXX</div>
	<div id="slipEditContent" class="slipedit-content"></div>
	<div class="slipedit-tool">
		<div class="slipedit-tool-btnCancel" onclick="closeSlipEditDiv()">取消</div>
		<div class="slipedit-tool-btnOk" onclick="slipedit_submit(getValue('editflag'))">确定</div>
	</div>
</div>
<div id="maskSlipEditDiv" class="mask-slipedit-div" style="display: none;"></div>
<input type="text" id="editid" class="display-none" />
<input type="text" id="editflag" class="display-none" />

<script type="text/javascript">
	function openSlipEditDiv(title, html) {
		setHtml('slipEditTitle', title);
		setHtml('slipEditContent', html);
        setDisplay('maskSlipEditDiv', '');
        document.body.style.overflow = 'hidden';
        setClass('slipEditBar', 'slipedit-bar-out');
    }

    function closeSlipEditDiv() {
    	setHtml('slipEditTitle', '');
    	setHtml('slipEditContent', '');
        setDisplay('maskSlipEditDiv', 'none');
        document.body.style.overflow = 'visible';
        setClass('slipEditBar', 'slipedit-bar-in');
    }
</script>

<style type="text/css">
	.slipedit-bar, .slipedit-bar-out, .slipedit-bar-in
    {
        width: 100%;
        height: 80%;
        bottom: -80%;
        background-color: white;
        display: -webkit-flex;
	    -webkit-flex-direction: column;
	    -webkit-align-items: stretch;
        position: fixed;
        z-index: 102;
    }

    .slipedit-bar-out
    {
        -webkit-animation: slipeditout 0.1s;
        bottom: 0;
    }

    .slipedit-bar-in
    {
        -webkit-animation: slipeditin 0.1s;
        bottom: -80%;
    }

    @keyframes slipeditout
    {
        from { bottom: -80%; }
        to { bottom: 0; }
    }

    @keyframes slipeditin
    {
        from { bottom: 0; }
        to { bottom: -80%; }
    }

    .mask-slipedit-div
    {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 101;
    }

    .slipedit-title
    {
    	-webkit-flex: none;
    	height: 80px;
    	line-height: 80px;
    	background-color: #ececec;
    	color: #31708f;
    	font-size: 28px;
    	padding-left: 20px;
    }

    .slipedit-content
    {
    	-webkit-flex: auto;
    	overflow-x: hidden;
        overflow-y: scroll;
    }

    .slipedit-tool
    {
    	-webkit-flex: none;
    	height: 120px;
    	background-color: white;
    	border-top: 1px solid #E4E4E4;
    	padding-left: 20px;
    	padding-right: 20px;
    	display: -webkit-flex;
	    -webkit-flex-direction: row;
	    -webkit-align-items: center;
    }

    .slipedit-tool-btnCancel
    {
    	-webkit-flex: none;
    	padding: 20px 30px 20px 30px;
	    border: 1px solid #abacae;
	    color: #abacae;
	    font-size: 30px;
	    border-radius: 10px;
	    margin-right: 20px;
    }

    .slipedit-tool-btnOk
    {
    	-webkit-flex: auto;
    	padding: 20px 10px 20px 10px;
	    border: 1px solid #EC9E14;
	    color: white;
	    font-size: 30px;
	    text-align: center;
	    background-color: #EC9E14;
	    border-radius: 10px;
    }

    .slipedit-info-bar
	{
		padding: 0px 28px 0px 28px;
		background-color: white;
		margin-top: 20px;
	}

    .slipedit-info-tr
	{
		padding: 34px 0px 34px 0px;
		border-bottom: 1px solid #F0F0F0;
		display: -webkit-flex;
	    -webkit-flex-direction: row;
	    -webkit-align-items: center;
	}

	.slipedit-info-tr2
	{
		padding: 34px 0px 34px 0px;
		display: -webkit-flex;
	    -webkit-flex-direction: row;
	    -webkit-align-items: center;
	}

	.slipedit-info-tr3
	{
	    display: -webkit-flex;
	    -webkit-flex-direction: row;
	    -webkit-align-items: center;
	}

	.slipedit-info-tr-field
	{
		-webkit-flex: none;
		width: 160px;
		color: #949494;
		font-size: 31px;
		text-align: left;
	}

	.slipedit-info-tr-field2
	{
		-webkit-flex: auto;
		color: #949494;
		font-size: 31px;
		text-align: left;
	}

	.slipedit-info-tr-content
	{
		-webkit-flex: auto;
		color: #333333;
		font-size: 32px;
		text-align: right;
		margin-right: 12px;
	}

	.slipedit-info-tr-input
	{
	    -webkit-flex: auto;
	    color: #333333;
	    font-size: 32px;
	    text-align: right;
	    border-style: none;
	    outline: none;
	    margin-right: 12px;
	}

	input::-webkit-input-placeholder
	{
		color: #d2d2d2;
	}

	.slipedit-info-tr-textarea
	{
	    -webkit-flex: 1;
	    height: 400px;
	    border: none;
	    color: #333333;
	    font-size: 32px;
	    resize: none;
	    background-color: #F2F2F2;
	    padding: 18px 18px 18px 18px;
	    margin-bottom: 34px;
	}

	.slipedit-info-onoff, .slipedit-info-onoff-select
	{
	    -webkit-flex: none;
	    width: 80px;
	    height: 40px;
	    background-color: #D2D2D2;
	    border: 1px solid #D2D2D2;
	    -webkit-border-radius: 50px;
	}

	.slipedit-info-onoff-select
	{
	    background-color: #21A0F7;
	    border: 1px solid #21A0F7;
	}

	.slipedit-info-onoff-btn, .slipedit-info-onoff-btn-select
	{
	    width: 40px;
	    height: 40px;
	    -webkit-border-radius: 50%;
	    background-color: white;
	}

	.slipedit-info-onoff-btn-select
	{
	    float: right;
	}

	.slipedit-info-tr-btn, .slipedit-info-tr-btn-select
	{
		-webkit-flex: none;
	    width: 106px;
	    height: 40px;
	    line-height: 40px;
	    color: #E4E4E4;
	    font-size: 26px;
	    text-align: center;
	    background-color: white;
	    border: 1px solid #E4E4E4;
	    -webkit-border-radius: 10px;
	}

	.slipedit-info-tr-btn-select
	{
	    color: #21A0F7;
	    border: 1px solid #21A0F7;
	}

	.slipedit-info-tr-img
	{
	    -webkit-flex: none;
	    height: 24px;
	}

	.slipedit-info-tr-unit
	{
		-webkit-flex: none;
	    color: #333333;
	    font-size: 28px;
	    text-align: center;
	}
</style>